<script setup>
import { ref, reactive, watch, watchEffect } from "vue";
let sum = ref(0);
let msg = ref('你好啊');
let person = reactive({
    name: '德玛西亚',
    age: 18,
    job: {
        j1: {
            salary: 10
        }
    }
})

// 监视
// watch(sum, (newValue, oldValue)=>{
//     console.log('person的age变化了', newValue, oldValue)
// }, {immediate: true})

// watchEffect 里面用到的 ref或reactive变量发生变化时执行
watchEffect(()=>{
    const x1 = sum.value
    const x2 = person.job.j1.salary
    console.log('watchEffect执行了')
})


</script>

<template>
    <h1>当前求和为{{ sum }}</h1>
    <button @click="sum++">点我+1</button>
    <hr />
    <h1>当前信息为{{ msg }}</h1>
    <button @click="msg += '!'">修改信息</button>
    <hr>
    <h1>姓名：{{ person.name }}</h1>
    <h1>年龄：{{ person.age }}</h1>
    <h1>薪资：{{ person.job.j1.salary }}</h1>

    <button @click="person.name += '@'">修改姓名</button>
    <button @click="person.age ++">修改年龄</button>
    <button @click="person.job.j1.salary ++">修改薪资</button>
</template>
